<html lang="zh-CN"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>太医守御·智药舱 - 智能用药管理系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/gh/davidshimjs/qrcodejs@gh-pages/qrcode.min.js"></script>
    <style>
        :root {
            --primary: #2a7f62;
            --secondary: #3498db;
            --accent: #e74c3c;
            --light: #f8f9fa;
            --dark: #2c3e50;
            --success: #27ae60;
            --warning: #f39c12;
            --gray: #95a5a6;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #f0f7ff 0%, #e6f7ff 100%);
            color: var(--dark);
            line-height: 1.6;
            overflow-x: hidden;
        }
        
        header {
            background: linear-gradient(120deg, var(--primary) 0%, var(--secondary) 100%);
            color: white;
            padding: 1rem 0;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            position: sticky;
            top: 0;
            z-index: 100;
        }
        
        .container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }
        
        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .logo {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .logo-icon {
            background: white;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary);
            font-size: 24px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
        
        .logo-text {
            font-size: 1.8rem;
            font-weight: 700;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
        }
        
        .logo-text span {
            color: #ffd43b;
        }
        
        nav ul {
            display: flex;
            list-style: none;
            gap: 25px;
        }
        
        nav a {
            color: white;
            text-decoration: none;
            font-weight: 500;
            font-size: 1.1rem;
            padding: 5px 10px;
            border-radius: 20px;
            transition: all 0.3s ease;
        }
        
        nav a:hover, nav a.active {
            background: rgba(255, 255, 255, 0.2);
        }
        
        .mobile-menu-btn {
            display: none;
            background: none;
            border: none;
            color: white;
            font-size: 1.5rem;
            cursor: pointer;
        }
        
        .hero {
            padding: 80px 0 50px;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%232a7f62" fill-opacity="0.1" d="M0,192L48,197.3C96,203,192,213,288,229.3C384,245,480,267,576,250.7C672,235,768,181,864,181.3C960,181,1056,235,1152,234.7C1248,235,1344,181,1392,154.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') bottom no-repeat, white;
            background-size: contain;
        }
        
        .hero-content {
            display: flex;
            align-items: center;
            gap: 50px;
        }
        
        .hero-text {
            flex: 1;
        }
        
        .hero-image {
            flex: 1;
            text-align: center;
        }
        
        .hero-image img {
            max-width: 100%;
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
            transition: transform 0.5s ease;
        }
        
        .hero-image img:hover {
            transform: translateY(-10px);
        }
        
        .hero h1 {
            font-size: 3.2rem;
            margin-bottom: 20px;
            line-height: 1.2;
            color: var(--primary);
        }
        
        .hero h1 span {
            color: var(--secondary);
        }
        
        .hero p {
            font-size: 1.2rem;
            margin-bottom: 30px;
            color: #34495e;
        }
        
        .tagline {
            display: inline-block;
            background: linear-gradient(120deg, var(--primary), var(--secondary));
            color: white;
            padding: 10px 25px;
            border-radius: 30px;
            font-weight: 600;
            font-size: 1.1rem;
            margin-bottom: 25px;
            box-shadow: 0 4px 15px rgba(42, 127, 98, 0.3);
        }
        
        .btn {
            display: inline-block;
            background: var(--primary);
            color: white;
            padding: 12px 30px;
            border-radius: 30px;
            text-decoration: none;
            font-weight: 600;
            font-size: 1.1rem;
            transition: all 0.3s ease;
            border: 2px solid var(--primary);
            box-shadow: 0 4px 15px rgba(42, 127, 98, 0.3);
        }
        
        .btn:hover {
            background: transparent;
            color: var(--primary);
            transform: translateY(-3px);
        }
        
        .btn-secondary {
            background: var(--secondary);
            border-color: var(--secondary);
            margin-left: 15px;
        }
        
        .btn-secondary:hover {
            color: var(--secondary);
        }
        
        .features {
            padding: 80px 0;
            background: white;
        }
        
        .section-title {
            text-align: center;
            margin-bottom: 50px;
        }
        
        .section-title h2 {
            font-size: 2.5rem;
            color: var(--primary);
            margin-bottom: 15px;
            position: relative;
            display: inline-block;
        }
        
        .section-title h2:after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background: var(--secondary);
            border-radius: 2px;
        }
        
        .section-title p {
            color: var(--gray);
            font-size: 1.2rem;
            max-width: 700px;
            margin: 20px auto 0;
        }
        
        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 50px;
        }
        
        .feature-card {
            background: white;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
            border: 1px solid rgba(0, 0, 0, 0.05);
        }
        
        .feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
        }
        
        .feature-icon {
            background: linear-gradient(120deg, var(--primary), var(--secondary));
            color: white;
            font-size: 2.5rem;
            height: 120px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .feature-content {
            padding: 25px;
        }
        
        .feature-content h3 {
            font-size: 1.5rem;
            margin-bottom: 15px;
            color: var(--dark);
        }
        
        .feature-content p {
            color: #7f8c8d;
            margin-bottom: 20px;
        }
        
        .app-preview {
            padding: 80px 0;
            background: linear-gradient(to bottom, #e6f7ff 0%, #f0f7ff 100%);
        }
        
        .app-container {
            display: flex;
            align-items: center;
            gap: 50px;
        }
        
        .phone-mockup {
            flex: 1;
            position: relative;
            max-width: 300px;
            margin: 0 auto;
        }
        
        .phone-frame {
            position: relative;
            padding-bottom: 200%;
            background: #333;
            border-radius: 40px;
            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
            overflow: hidden;
        }
        
        .phone-screen {
            position: absolute;
            top: 5%;
            left: 5%;
            width: 90%;
            height: 90%;
            background: white;
            border-radius: 30px;
            overflow: hidden;
        }
        
        .app-screen {
            background: #f8f9fa;
            height: 100%;
            padding: 20px;
            overflow-y: auto;
        }
        
        .app-header {
            background: var(--primary);
            color: white;
            padding: 15px;
            text-align: center;
            border-radius: 0 0 20px 20px;
            margin: -20px -20px 20px;
        }
        
        .medication-list {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        
        .medication-item {
            background: white;
            border-radius: 15px;
            padding: 15px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
            border-left: 4px solid var(--success);
            position: relative;
        }
        
        .medication-item.warning {
            border-left-color: var(--warning);
        }
        
        .medication-item.danger {
            border-left-color: var(--accent);
        }
        
        .med-title {
            font-weight: 600;
            margin-bottom: 5px;
            display: flex;
            justify-content: space-between;
        }
        
        .med-details {
            font-size: 0.9rem;
            color: var(--gray);
            margin-bottom: 5px;
        }
        
        .med-time {
            font-weight: 600;
            color: var(--primary);
        }
        
        .med-status {
            position: absolute;
            top: 15px;
            right: 15px;
            font-size: 0.8rem;
            padding: 3px 8px;
            border-radius: 20px;
            background: var(--success);
            color: white;
        }
        
        .med-status.warning {
            background: var(--warning);
        }
        
        .med-status.danger {
            background: var(--accent);
        }
        
        .app-info {
            flex: 1;
        }
        
        .app-info h2 {
            font-size: 2.5rem;
            color: var(--primary);
            margin-bottom: 20px;
        }
        
        .benefits {
            padding: 80px 0;
            background: white;
        }
        
        .benefits-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }
        
        .benefit-card {
            text-align: center;
            padding: 40px 25px;
            border-radius: 15px;
            background: linear-gradient(to bottom, #f8f9fa 0%, white 100%);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
            border: 1px solid rgba(0, 0, 0, 0.03);
        }
        
        .benefit-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
        }
        
        .benefit-icon {
            width: 80px;
            height: 80px;
            background: linear-gradient(120deg, var(--primary), var(--secondary));
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            margin: 0 auto 25px;
        }
        
        .benefit-card h3 {
            font-size: 1.5rem;
            margin-bottom: 15px;
            color: var(--dark);
        }
        
        .benefit-card p {
            color: #7f8c8d;
        }
        
        .cta {
            padding: 100px 0;
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            color: white;
            text-align: center;
        }
        
        .cta h2 {
            font-size: 2.8rem;
            margin-bottom: 20px;
        }
        
        .cta p {
            font-size: 1.2rem;
            max-width: 700px;
            margin: 0 auto 40px;
            opacity: 0.9;
        }
        
        .contact {
            padding: 80px 0;
            background: white;
        }
        
        .contact-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 50px;
        }
        
        .contact-info h3 {
            font-size: 1.8rem;
            color: var(--primary);
            margin-bottom: 25px;
        }
        
        .contact-details {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        
        .contact-item {
            display: flex;
            align-items: flex-start;
            gap: 15px;
        }
        
        .contact-icon {
            width: 50px;
            height: 50px;
            background: linear-gradient(120deg, var(--primary), var(--secondary));
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            flex-shrink: 0;
        }
        
        .contact-text h4 {
            font-size: 1.2rem;
            margin-bottom: 5px;
        }
        
        .contact-text p, .contact-text a {
            color: #7f8c8d;
            text-decoration: none;
        }
        
        .contact-text a:hover {
            color: var(--primary);
            text-decoration: underline;
        }
        
        .qr-section {
            background: #f8f9fa;
            border-radius: 15px;
            padding: 30px;
            text-align: center;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
        }
        
        .qr-section h3 {
            font-size: 1.5rem;
            color: var(--primary);
            margin-bottom: 20px;
        }
        
        .qr-container {
            display: flex;
            justify-content: center;
            margin: 20px 0;
        }
        
        #qrcode {
            padding: 15px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .qr-text {
            font-size: 0.9rem;
            color: #7f8c8d;
            margin-top: 15px;
        }
        
        footer {
            background: var(--dark);
            color: white;
            padding: 40px 0 20px;
            text-align: center;
        }
        
        .footer-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
        }
        
        .copyright {
            font-size: 0.9rem;
            opacity: 0.7;
            margin-top: 20px;
        }
        
        @media (max-width: 992px) {
            .hero-content {
                flex-direction: column;
            }
            
            .app-container {
                flex-direction: column;
            }
            
            .hero h1 {
                font-size: 2.5rem;
            }
        }
        
        @media (max-width: 768px) {
            .mobile-menu-btn {
                display: block;
            }
            
            nav ul {
                display: none;
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                background: var(--primary);
                flex-direction: column;
                padding: 20px 0;
                text-align: center;
                box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
            }
            
            nav ul.active {
                display: flex;
            }
            
            .btn {
                display: block;
                margin: 10px 0;
                width: 100%;
            }
            
            .btn-secondary {
                margin-left: 0;
            }
            
            .hero {
                padding: 60px 0 40px;
            }
        }
        
        @media (max-width: 576px) {
            .section-title h2 {
                font-size: 2rem;
            }
            
            .hero h1 {
                font-size: 2rem;
            }
            
            .cta h2 {
                font-size: 2.2rem;
            }
        }
    </style>
</head>
<body>
    <!-- 头部导航 -->
    <header>
        <div class="container">
            <div class="header-content">
                <div class="logo">
                    <div class="logo-icon">
                        <i class="fas fa-pills"></i>
                    </div>
                    <div class="logo-text">太医守御<span>·智药舱</span></div>
                </div>
                <button class="mobile-menu-btn" id="mobileMenuBtn">
                    <i class="fas fa-bars"></i>
                </button>
                <nav>
                    <ul id="navMenu">
                        <li><a href="#features" class="active">核心功能</a></li>
                        <li><a href="#app">应用预览</a></li>
                        <li><a href="#benefits">产品优势</a></li>
                        <li><a href="#contact">联系我们</a></li>
                        
                    </ul>
                </nav>
            </div>
        </div>
    </header>

    <!-- 英雄区域 -->
    <section class="hero">
        <div class="container">
            <div class="hero-content">
                <div class="hero-text">
                    <div class="tagline">智能用药管理专家</div>
                    <h1>重新定义用药安全<br>守护家人<span>健康</span></h1>
                    <p>太医守御·智药舱是一款革命性的智能用药管理系统，通过AI技术和适老化设计，解决漏服、误服、药品过期等用药难题，为全年龄段用户提供全天候用药守护。</p>
                    <div class="hero-buttons">
                        <a href="#features" class="btn">探索功能</a>
                        
                    </div>
                </div>
                <div class="hero-image">
                    <img src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/code_assistant/1857917818c94ec1be85a24ef4481580~tplv-a9rns2rl98-image.image?rk3s=8e244e95&amp;rrcfp=2609e108&amp;x-expires=1750765305&amp;x-signature=RblIzWsgA1j4tl1u%2Fc2cur39VgA%3D" alt="太医守御·智药舱">
                </div>
            </div>
        </div>
    </section>

    <!-- 功能亮点 -->
    <section class="features" id="features">
        <div class="container">
            <div class="section-title">
                <h2>核心功能亮点</h2>
                <p>太医守御·智药舱整合多项创新技术，为不同人群提供全面的用药管理解决方案</p>
            </div>
            
            <div class="features-grid">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-capsules"></i>
                    </div>
                    <div class="feature-content">
                        <h3>药品智能管理</h3>
                        <p>智能分类存储，RFID自动识别药品类别，温湿度实时监控，OCR扫描识别药品信息，提前30天过期预警，确保药品安全有效。</p>
                    </div>
                </div>
                
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-bell"></i>
                    </div>
                    <div class="feature-content">
                        <h3>全场景用药提醒</h3>
                        <p>多模式智能提醒：语音播报、LED闪光、震动提醒。根据环境自动切换模式（白天/夜间/户外），支持方言交互，确保提醒及时有效。</p>
                    </div>
                </div>
                
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-user-friends"></i>
                    </div>
                    <div class="feature-content">
                        <h3>家庭远程监护</h3>
                        <p>多账户分权管理，子女可远程设置父母用药提醒，实时查看用药记录。连续漏服自动触发家属微信通知，让关爱零距离。</p>
                    </div>
                </div>
                
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-heartbeat"></i>
                    </div>
                    <div class="feature-content">
                        <h3>健康数据互联</h3>
                        <p>无缝对接医保平台，用药数据加密传输。生成月度依从性报告，支持医生远程调阅，助力慢病规范管理。</p>
                    </div>
                </div>
                
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-touchpad"></i>
                    </div>
                    <div class="feature-content">
                        <h3>极简交互设计</h3>
                        <p>专为老年人优化的界面：大字体(≥28pt)、高对比度、物理按键(≥12mm)、轻按压力度(0.5-1N)，操作简单直观，零学习成本。</p>
                    </div>
                </div>
                
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <div class="feature-content">
                        <h3>安全与合规保障</h3>
                        <p>采用国密算法(SM2/SM4)加密数据，符合等保三级标准。通过医疗器械认证和适老化认证，确保用户隐私与产品安全。</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 应用预览 -->
    <section class="app-preview" id="app">
        <div class="container">
            <div class="app-container">
                <div class="phone-mockup">
                    <div class="phone-frame">
                        <div class="phone-screen">
                            <div class="app-screen">
                                <div class="app-header">
                                    <h3>用药管理</h3>
                                    <p>2023年10月15日 星期日</p>
                                </div>
                                <div class="medication-list">
                                    <div class="medication-item">
                                        <div class="med-title">降压药 - 硝苯地平</div>
                                        <div class="med-details">剂量: 10mg | 每日2次</div>
                                        <div class="med-time">下次提醒: 08:00 AM</div>
                                        <div class="med-status">按时服用</div>
                                    </div>
                                    <div class="medication-item warning">
                                        <div class="med-title">降糖药 - 二甲双胍</div>
                                        <div class="med-details">剂量: 500mg | 每日3次</div>
                                        <div class="med-time">下次提醒: 12:30 PM</div>
                                        <div class="med-status warning">即将过期</div>
                                    </div>
                                    <div class="medication-item">
                                        <div class="med-title">维生素C</div>
                                        <div class="med-details">剂量: 100mg | 每日1次</div>
                                        <div class="med-time">下次提醒: 07:30 AM</div>
                                        <div class="med-status">按时服用</div>
                                    </div>
                                    <div class="medication-item danger">
                                        <div class="med-title">护肝片</div>
                                        <div class="med-details">剂量: 200mg | 每日2次</div>
                                        <div class="med-time">上次漏服: 昨天 20:00</div>
                                        <div class="med-status danger">已通知家属</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="app-info">
                    <h2>智能用药管理体验                    <div class="feature-buttons">
                        <button id="medManageBtn" class="feature-btn">药品管理</button>
                        <button id="reminderBtn" class="feature-btn">用药提醒</button>
                        <button id="familyBtn" class="feature-btn">家庭监护</button>
                    </div>
                    <p style="font-size: 0.9rem;">太医守御·智药舱应用界面简洁直观，提供全方位的用药管理功能：</p>
                    <ul style="margin: 20px 0; padding-left: 20px; font-size: 0.85rem;">
                        <li style="margin-bottom: 10px;"><i class="fas fa-pills" style="margin-right: 8px; color: var(--primary);"></i>清晰展示每种药品的名称、剂量和服用时间</li>
                        <li style="margin-bottom: 10px;"><i class="fas fa-bell" style="margin-right: 8px; color: var(--primary);"></i>智能提醒系统确保按时服药</li>
                        <li style="margin-bottom: 10px;"><i class="fas fa-exclamation-triangle" style="margin-right: 8px; color: var(--primary);"></i>过期药品预警，避免误服失效药物</li>
                        <li style="margin-bottom: 10px;"><i class="fas fa-user-shield" style="margin-right: 8px; color: var(--primary);"></i>漏服自动通知家属，保障用药安全</li>
                        <li style="margin-bottom: 10px;"><i class="fas fa-cloud" style="margin-right: 8px; color: var(--primary);"></i>用药记录云端同步，支持医生远程查看</li>
                    </ul>
                    <p style="font-size: 0.85rem;"><i class="fas fa-eye" style="margin-right: 8px; color: var(--primary);"></i>通过颜色标识和状态标签，用户可以一目了然地掌握所有药品的服用情况和状态。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 产品优势 -->
    <section class="benefits" id="benefits">
        <div class="container">
            <div class="section-title">
                <h2>产品核心优势</h2>
                <p>太医守御·智药舱为不同人群解决用药难题，创造多重价值</p>
            </div>
            
            <div class="benefits-grid">
                <div class="benefit-card">
                    <div class="benefit-icon">
                        <i class="fas fa-user-clock"></i>
                    </div>
                    <h3>老年人用药安全</h3>
                    <p>解决漏服、误服、操作复杂三大痛点，用药错误急诊降低72%，操作成功率提升至92%</p>
                </div>
                
                <div class="benefit-card">
                    <div class="benefit-icon">
                        <i class="fas fa-user-graduate"></i>
                    </div>
                    <h3>年轻人健康管理</h3>
                    <p>解决保健品漏服(52%)和药品混放问题(41%)，支持社交分享功能，提升健康自律</p>
                </div>
                
                <div class="benefit-card">
                    <div class="benefit-icon">
                        <i class="fas fa-home"></i>
                    </div>
                    <h3>家庭健康守护</h3>
                    <p>多账户独立管理，儿童锁设计，解决儿童用药剂量混淆(32%)和过期药误用(28%)</p>
                </div>
                
                <div class="benefit-card">
                    <div class="benefit-icon">
                        <i class="fas fa-hiking"></i>
                    </div>
                    <h3>户外旅行保障</h3>
                    <p>IP68防水防摔，-20℃~60℃宽温工作，解决药品受潮失效(18%)和时区用药混乱(48%)</p>
                </div>
                
                <div class="benefit-card">
                    <div class="benefit-icon">
                        <i class="fas fa-file-medical"></i>
                    </div>
                    <h3>医疗成本降低</h3>
                    <p>减少因用药错误导致的额外医疗支出，年均可降低医保费用1200元/人</p>
                </div>
                
                <div class="benefit-card">
                    <div class="benefit-icon">
                        <i class="fas fa-chart-line"></i>
                    </div>
                    <h3>慢病管理提升</h3>
                    <p>慢性病用药依从性从不足50%提升至75%，助力"健康中国2030"目标实现</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 行动号召 -->
    <section class="cta">
        <div class="container">
            <h2>开启智能用药管理新时代</h2>
            <p>太医守御·智药舱，用科技创新守护家人健康，让用药安全触手可及</p>
            <a href="#qrcode" class="btn">立即体验</a>
        </div>
    </section>

    <!-- 联系我们 -->
    <section class="contact" id="contact">
        <div class="container">
            <div class="section-title">
                <h2>联系我们</h2>
                <p>获取更多产品信息或合作机会</p>
            </div>
            
            <div class="contact-grid" style="display: flex; justify-content: space-between;">
                <div class="contact-info" style="width: 100%;">
                    <h3>项目团队信息</h3>
                    <div class="contact-details">
                        <div class="contact-item">
                            <div class="contact-icon">
                                <i class="fas fa-envelope"></i>
                            </div>
                            <div class="contact-text">
                                <h4>电子邮箱</h4>
                                <a href="mailto:2286803759@qq.com">2286803759@qq.com</a>
                            </div>
                        </div>
                        
                        <div class="contact-item">
                            <div class="contact-icon">
                                <i class="fas fa-phone"></i>
                            </div>
                            <div class="contact-text">
                                <h4>联系电话</h4>
                                <a href="tel:13290394843">13290394843</a>
                            </div>
                        </div>
                        
                        <div class="contact-item">
                            <div class="contact-icon">
                                <i class="fas fa-map-marker-alt"></i>
                            </div>
                            <div class="contact-text">
                                <h4>地址</h4>
                                <p>重庆现代制造职业学院</p>
                            </div>
                        </div>
                        
                        <div class="contact-item">
                            <div class="contact-icon">
                                <i class="fas fa-users"></i>
                            </div>
                            <div class="contact-text">
                                <h4>核心团队</h4>
                                <p>蔺秭俊（总负责）、梁星（硬件）、盛家馨（软件）、李浩阳（医疗合规）、孙鑫海（市场）、陈皓宇（财务）、宋昌恒（供应链）</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                
                
                
                
                
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer>
        <div class="container">
            <div class="footer-content">
                <div class="logo">
                    <div class="logo-icon">
                        <i class="fas fa-pills"></i>
                    </div>
                    <div class="logo-text">太医守御<span>·智药舱</span></div>
                </div>
                <p>智能用药管理专家 · 守护家人健康</p>
                <div class="copyright">
                    © 2025 太医守御·智药舱项目团队 | 重庆现代制造职业学院 | 第七届"大创慧谷"大学生创业创新大赛
                </div>
            </div>
        </div>
    </footer>

    <script>
        
        
        // 功能按钮交互
        // 存储用户数据
        let medications = [];
        let reminders = [];
        let familyMembers = [];
        
        // 显示数据列表
        function showDataList(data, title, icon) {
             let listHtml = `<div class="data-card" style="background: white; border-radius: 15px; padding: 20px; margin-top: 20px; box-shadow: 0 5px 15px rgba(0,0,0,0.05);">
                 <h3 style="color: var(--primary); margin-bottom: 15px; display: flex; align-items: center;"><i class="fas fa-${icon}" style="margin-right: 10px;"></i>${title}</h3>
                 <div class="data-content" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px;">`;
             data.forEach((item, index) => {
                 listHtml += `<div class="data-item" style="background: #f8f9fa; padding: 12px; border-radius: 10px; display: flex; justify-content: space-between; align-items: center;">
                     <span style="font-size: 0.9rem;">${item}</span>
                     <button onclick="removeItem(this, ${index}, '${title}')" style="background: var(--accent); color: white; border: none; border-radius: 50%; width: 25px; height: 25px; display: flex; align-items: center; justify-content: center; cursor: pointer;">
                         <i class="fas fa-times" style="font-size: 0.8rem;"></i>
                     </button>
                 </div>`;
             });
             listHtml += `</div></div>`;
             return listHtml;
         }
         
         function removeItem(button, index, type) {
             if(type === '药品管理') medications.splice(index, 1);
             else if(type === '用药提醒') reminders.splice(index, 1);
             else if(type === '家庭监护') familyMembers.splice(index, 1);
             
             updateDataDisplay();
         }
         
         function updateDataDisplay() {
             const containers = document.querySelectorAll('.data-container');
             containers.forEach(container => container.remove());
             
             if(medications.length > 0) {
                 const container = document.createElement('div');
                 container.className = 'data-container';
                 container.innerHTML = showDataList(medications, '药品管理', 'pills');
                 document.querySelector('.app-info').appendChild(container);
             }
             
             if(reminders.length > 0) {
                 const container = document.createElement('div');
                 container.className = 'data-container';
                 container.innerHTML = showDataList(reminders, '用药提醒', 'bell');
                 document.querySelector('.app-info').appendChild(container);
             }
             
             if(familyMembers.length > 0) {
                 const container = document.createElement('div');
                 container.className = 'data-container';
                 container.innerHTML = showDataList(familyMembers, '家庭监护', 'user-friends');
                 document.querySelector('.app-info').appendChild(container);
             }
         }
        
        document.getElementById('medManageBtn').addEventListener('click', function() {
            const medName = prompt('请输入药品名称:');
            if(medName) {
                medications.push(medName);
                updateDataDisplay();
                
                // 显示更美观的提示
                const toast = document.createElement('div');
                toast.style.position = 'fixed';
                toast.style.bottom = '20px';
                toast.style.left = '50%';
                toast.style.transform = 'translateX(-50%)';
                toast.style.backgroundColor = 'var(--primary)';
                toast.style.color = 'white';
                toast.style.padding = '10px 20px';
                toast.style.borderRadius = '30px';
                toast.style.boxShadow = '0 4px 15px rgba(0,0,0,0.2)';
                toast.style.zIndex = '1000';
                toast.style.display = 'flex';
                toast.style.alignItems = 'center';
                toast.innerHTML = `<i class="fas fa-check-circle" style="margin-right: 8px;"></i>已添加药品: ${medName}`;
                
                document.body.appendChild(toast);
                setTimeout(() => {
                    toast.style.transition = 'opacity 0.5s';
                    toast.style.opacity = '0';
                    setTimeout(() => toast.remove(), 500);
                }, 2000);
            }
        });
        
        document.getElementById('reminderBtn').addEventListener('click', function() {
            const time = prompt('设置提醒时间(例如: 08:00):');
            if(time) {
                reminders.push(time);
                updateDataDisplay();
                
                // 显示更美观的提示
                const toast = document.createElement('div');
                toast.style.position = 'fixed';
                toast.style.bottom = '20px';
                toast.style.left = '50%';
                toast.style.transform = 'translateX(-50%)';
                toast.style.backgroundColor = 'var(--secondary)';
                toast.style.color = 'white';
                toast.style.padding = '10px 20px';
                toast.style.borderRadius = '30px';
                toast.style.boxShadow = '0 4px 15px rgba(0,0,0,0.2)';
                toast.style.zIndex = '1000';
                toast.style.display = 'flex';
                toast.style.alignItems = 'center';
                toast.innerHTML = `<i class="fas fa-check-circle" style="margin-right: 8px;"></i>已设置${time}的用药提醒`;
                
                document.body.appendChild(toast);
                setTimeout(() => {
                    toast.style.transition = 'opacity 0.5s';
                    toast.style.opacity = '0';
                    setTimeout(() => toast.remove(), 500);
                }, 2000);
            }
        });
        
        document.getElementById('familyBtn').addEventListener('click', function() {
            const member = prompt('添加家庭成员姓名:');
            if(member) {
                familyMembers.push(member);
                updateDataDisplay();
                
                // 显示更美观的提示
                const toast = document.createElement('div');
                toast.style.position = 'fixed';
                toast.style.bottom = '20px';
                toast.style.left = '50%';
                toast.style.transform = 'translateX(-50%)';
                toast.style.backgroundColor = 'var(--success)';
                toast.style.color = 'white';
                toast.style.padding = '10px 20px';
                toast.style.borderRadius = '30px';
                toast.style.boxShadow = '0 4px 15px rgba(0,0,0,0.2)';
                toast.style.zIndex = '1000';
                toast.style.display = 'flex';
                toast.style.alignItems = 'center';
                toast.innerHTML = `<i class="fas fa-check-circle" style="margin-right: 8px;"></i>已添加家庭成员: ${member}`;
                
                document.body.appendChild(toast);
                setTimeout(() => {
                    toast.style.transition = 'opacity 0.5s';
                    toast.style.opacity = '0';
                    setTimeout(() => toast.remove(), 500);
                }, 2000);
            }
        });
        
        // 移动端菜单切换
        document.getElementById('mobileMenuBtn').addEventListener('click', function() {
            document.getElementById('navMenu').classList.toggle('active');
        });
        
        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
                
                // 关闭移动菜单
                document.getElementById('navMenu').classList.remove('active');
            });
        });
        
        
        
        // 滚动时更新导航活动状态
        window.addEventListener('scroll', function() {
            const sections = document.querySelectorAll('section');
            const navLinks = document.querySelectorAll('nav a');
            
            let current = '';
            
            sections.forEach(section => {
                const sectionTop = section.offsetTop;
                const sectionHeight = section.clientHeight;
                if (pageYOffset >= (sectionTop - sectionHeight / 3)) {
                    current = section.getAttribute('id');
                }
            });
            
            navLinks.forEach(link => {
                link.classList.remove('active');
                if (link.getAttribute('href').includes(current)) {
                    link.classList.add('active');
                }
            });
        });
    </script>


    </body></html>